<script setup lang="ts">
import './node-style.scss'
import {inject, ref} from "vue";
import {Node} from "@antv/x6";
import {OutputNode} from "@/views/ai/agent/x6/node/types";

const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
}

const aliasName=ref<string>()
const formData=reactive<{outputs:OutputNode[]}>({
  outputs:[]
})
const addNewKey=()=>{
  const length = formData.outputs.length;
  if (aliasName.value){
    const d=ref<OutputNode>({alias:aliasName.value,id:`alias_${length}_`+id.value,type:'input-json',css:['flow-object']})
    formData.outputs.push(d.value)
  }
  aliasName.value=undefined

}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
const style={
  'input-json':['flow-object'],
  'input-array-json':['flow-array'],
  'input-text':['flow-string'],
  'input-string':['flow-string'],
  'input-array-document':['flow-array-document'],
  'input-int':['flow-number'],
  'input-mcp':['flow-array'],
  'input-boolean':['flow-boolean'],
}
const onChange=(code:string,output:OutputNode)=>{
  //修改type
  output.css=style[code]
}
const del=(output:OutputNode)=>{
  if (formData.outputs.includes(output)){
    formData.outputs.splice(formData.outputs.indexOf(output),1)
  }
}
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    node.setData(formData)
  }
},{deep:true,immediate:false})
</script>

<template>
  <div class="node">
    <div class="node-title line5">
      <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-exec_'+id"></div>
      <div>输出</div>
      <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <el-form
      :model="formData"
      label-position="top"
      @mousedown.stop
      @focus.stop
      style="cursor: default">
      <el-form-item>
        <div class="line5">
          <el-input placeholder="输出结果的KEY" v-model="aliasName"/>
          <el-button @click="addNewKey">新增KEY</el-button>
        </div>
      </el-form-item>
      <el-form-item v-for="out in formData.outputs" :key="out.alias">
        <div class="line5" style="width: 100%">
          <div class="flow-dot" :class="out.css" magnet="true" :x-type="out.type" :x-id="out.id" :x-alias="out.alias"></div>
          <el-select style="width: 30%" v-model="out.type" @change="(code)=>onChange(code,out)">
            <el-option value="input-json" label="实体"/>
            <el-option value="input-array-json" label="实体分片"/>
            <el-option value="input-text" label="文本输出"/>
            <el-option value="input-array-document" label="文档集合"/>
            <el-option value="input-string" label="String"/>
            <el-option value="input-int" label="Integer"/>
            <el-option value="input-mcp" label="MCP结果"/>
            <el-option value="input-boolean" label="布尔值"/>
          </el-select>
          <el-input placeholder="输出结果的KEY" disabled style="width: 40%" v-model="out.alias"/>
          <el-button @click="del(out)" type="danger">删除</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
